<template>
    <div>
      <h2>用户信息展示</h2>
      <CustomAttributeList
        :attributes="attributes"
        :name-font-size="12"
        :value-font-size="18"
        background-color="#e6f7ff"
      />
    </div>
  </template>
  
  <script setup>
  import CustomAttributeList from '@/components/CustomAttributeList.vue';
  import { ref } from 'vue';
  
  const attributes = ref([
    { name: '姓名', value: '张三', width: '100px' },
    { name: '年龄', value: '28', width: '80px' },
    { name: '职业', value: '工程师', width: '120px' },
    { name: '城市', value: '北京', width: '150px' },
    {
      name: '邮箱',
      value: 'zhangsan@example.com',
      width: '200px',
      logo: 'https://via.placeholder.com/16x16.png?text=📧'
    }
  ]);
  </script>